<template>
	<view class="fixed">
		<navigator url="/pages/vote/index" open-type="reLaunch" class="item" hover-class="none">
			<image v-if="current == 0" src="/static/images/vote/929r1-1.png" mode="aspectFill"></image>
			<image v-else src="/static/images/vote/929r1-2.png" mode="aspectFill"></image>
			<view>首页</view>
		</navigator>
		<navigator url="/pages/vote/prize" open-type="reLaunch" class="item" hover-class="none">
			<image v-if="current == 1" src="/static/images/vote/929r3-1.png" mode="aspectFill"></image>
			<image v-else src="/static/images/vote/929r3-2.png" mode="aspectFill"></image>
			<view>奖品</view>
		</navigator>
		<navigator url="/pages/vote/rank" open-type="reLaunch" class="item" hover-class="none">
			<image v-if="current == 2" src="/static/images/vote/929r4-1.png" mode="aspectFill"></image>
			<image v-else src="/static/images/vote/929r4-2.png" mode="aspectFill"></image>
			<view>榜单</view>
		</navigator>
	</view>
</template>

<script>
	export default {
		props: {
			current: {
				type: [String, Number],
				default: 0
			}
		}
	}
</script>

<style lang="scss" scoped>
	.fixed {
		position: fixed;
		bottom: -2rpx;
		left: 0;
		width: 100vw;
		height: 120rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		z-index: 99;
		text-align: center;
		box-shadow: 0 -10rpx 10rpx rgba(0,0,0,.06);
		.item {
			padding: 40rpx;
			image {
				width: 46rpx;
				height: 46rpx;
			}
		}
		.center {
			image {
				margin-top: -70rpx;
				position: relative;
				width: 160rpx;
				height: 160rpx;
				border-radius: 50%;
			}
		}
		.right {
			padding: 40rpx;
			image {
				width: 40rpx;
				height: 50rpx;
			}
		}
	}
</style>